<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bodo</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Bodo - Simple One Page Personal" name="description">
<meta content="BdgPixel" name="author">
<!--Fav-->
<link href="images/favicon.ico" rel="shortcut icon">

<!--styles-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">

<!--fonts google-->
<!--<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>-->

<!--[if lt IE 9]>
   <script type="text/javascript" src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<!--PRELOADER-->
<div id="preloader">
  <div id="status">
	<img alt="logo" src="images/logo-big.png">
  </div>
</div>
<!--/.PRELOADER END-->

<!--HEADER -->
<div class="header">
  <div class="for-sticky">
	<!--LOGO-->
	<div class="col-md-2 col-xs-6 logo">
	  <a href="index.html"><img alt="logo" class="logo-nav" src="images/logo.png"></a>
	</div>
	<!--/.LOGO END-->
  </div>
  <div class="menu-wrap">
	<nav class="menu">
	  <div class="menu-list">
		<a data-scroll="" href="#home" class="active">
		  <span>Home</span>
		</a>
		<a data-scroll="" href="#about">
		  <span>About</span>
		</a>
		<a data-scroll="" href="#work">
		  <span>Work</span>
		</a>
		 <a data-scroll="" href="#services">
		  <span>Services</span>
		</a>
		<a data-scroll="" href="#employement">
		  <span>Employement</span>
		</a>
		<a data-scroll="" href="#skill">
		  <span>Skills</span>
		</a>
		<a data-scroll="" href="#education">
		  <span>Education</span>
		</a>
		<a data-scroll="" href="#testimonial">
		  <span>Testimonial</span>
		</a>
		<a data-scroll="" href="#blog">
		  <span>Blog</span>
		</a>
		<a data-scroll="" href="#contact">
		  <span>Contact</span>
		</a>
	  </div>
	</nav>
	<button class="close-button" id="close-button">Close Menu</button>
  </div>
  <button class="menu-button" id="open-button">
	<span></span>
	<span></span>
	<span></span>
  </button><!--/.for-sticky-->
</div>
<!--/.HEADER END-->

<!--CONTENT WRAP-->
<div class="content-wrap">
  <!--CONTENT-->
  <div class="content">
	<!--HOME-->
	<section id="home">
	  <div class="container">
		<div class="row">
		  <div class="wrap-hero-content">
			  <div class="hero-content">
				<h1>Hello</h1>
				<br>
				<span class="typed"></span>
			  </div>
		  </div>
		  <div class="mouse-icon margin-20">
			<div class="scroll"></div>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.HOME END-->

	<!--ABOUT-->
	<section id="about">
	  <div class="col-md-6 col-xs-12 no-pad">
		<div class="bg-about"></div>
	  </div>
	  <div class="col-md-6 col-sm-12 col-xs-12 white-col">
		<div class="row">
		  <!--OWL CAROUSEL2-->
		  <div class="owl-carousel2">
			<div class="col-md-12">
			  <div class="wrap-about">
				<div class="w-content">
				  <p class="head-about">
					Design is the method of putting form and content together. Design, just as art, has multiple definitions there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that's why it is so complicated.
				  </p>
				  
				  <h5 class="name">
					M. Reza
				  </h5>
				  <img alt="signature" src="images/signature.png">
				</div>
			  </div>
			</div>
		  
			<div class="col-md-12 col-sm-12 col-xs-12 white-col">
			  <div class="row">
				<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
				  <div class="wrap-about">
					<table class="w-content">
					  <tr>
						<td class="title">Name </td>
						<td class="break">:</td>
						<td> M. Reza</td>
					  </tr>
					  <tr>
						<td class="title">Phone </td>
						<td class="break">:</td>
						<td> +62 8678 999 012</td>
					  </tr>
					  <tr>
						<td class="title">Email </td>
						<td class="break">:</td>
						<td> bdgpixel@gmail.com</td>
					  </tr>
					  <tr>
						<td class="title">Address </td>
						<td class="break">:</td>
						<td> Cipamokolan street 102 , Bandung, Indonesia</td>
					  </tr>
					  <tr>
						<td class="title">Skype </td>
						<td class="break">:</td>
						<td> bdgpixel</td>
					  </tr>
					  <tr>
						<td class="title">Dribbble </td>
						<td class="break">:</td>
						<td> Muh-Reza</td>
					  </tr>
					  <tr>
						<td class="title">Behance</td>
						<td class="break">:</td>
						<td> m-reza</td>
					  </tr>
					</table>
				  </div>
				</div>
			  </div>
			</div>
		  </div>
		  <!--/.OWL CAROUSEL2 END-->
		</div>
	  </div>
	</section>
	<!--/.ABOUT END-->

	<!--WORK-->
	<section class="grey-bg mar-tm-10" id="work">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Work</span>
			</h3>
			<p class="content-detail">
			  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <br><br>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros.
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<!--PORTFOLIO IMAGE-->
			<ul class="portfolio-image">
			  <li class="col-md-6">
				<a href="images/bw-1.png"><img alt="image" src="images/bw-1.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					   <p class="desc">My Resume</p>
					</div>

				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-2.png"><img alt="image" src="images/bw-2.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Pangirutan
					  </p>
					</div>
				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-3.png"><img alt="image" src="images/bw-3.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Black Mug
					  </p>
					</div>
				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-4.png"><img alt="image" src="images/bw-4.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Notebook Mockup
					  </p>
					</div>
				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-5.png"><img alt="image" src="images/bw-5.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Presentation
					  </p>  
					</div>
				  </div>
				</a>
			  </li>
			  <li class="col-md-6">
				<a href="images/bw-6.png"><img alt="image" src="images/bw-6.png">
				  <div class="decription-wrap">
					<div class="image-bg">
					  <p class="desc">
						Letter Branding
					  </p>
					</div>
				  </div>
				</a>
			  </li>
			</ul>
			<!--/.PORTFOLIO IMAGE END-->
		  </div>
		</div>
	  </div>
	</section>
	<!--/.WORK END-->

	<!--SERVICES-->
	<section class="white-bg" id="services">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Services</span>
			</h3>
			<p class="content-detail">
			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<div class="row">
			  <ul class="listing-item">
				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  c
					</h3>
					<p class="head-sm">
					  MARKETING
					</p>
					<p class="text-grey">
					  Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. 
					</p>
				  </div>
				</li>

				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  b
					</h3>
					<p class="head-sm">
					  WEB DESIGN
					</p>
					<p class="text-grey">
					  Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. 
					</p>
				  </div>
				</li>

				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  d
					</h3>
					<p class="head-sm">
					  UI
					</p>
					<p class="text-grey">
					  Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. 
					</p>
				  </div>
				</li>
			  </ul>

			  <ul class="listing-item">
				<li>
				  <div class="col-md-4 col-sm-4">
					<p class="icon-use">
					  f
					</p>
					<p class="head-sm">
					  DIRECTOR
					</p>
					<p class="text-grey">
					  Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. 
					</p>
				  </div>
				</li>

				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  p
					</h3>
					<p class="head-sm">
					  UX DESIGN
					</p>
					<p class="text-grey">
					  Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. 
					</p>
				  </div>
				</li>

				<li>
				  <div class="col-md-4 col-sm-4">
					<h3 class="icon-use">
					  m
					</h3>
					<p class="head-sm">
					  FRONT END
					</p>
					<p class="text-grey">
					  Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. 
					</p>
				  </div>
				</li>
			  </ul>

			</div>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.SERVICES END-->

	<!--EMPLOYEMENT-->
	<section class="grey-bg" id="employement">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Employement</span>
			</h3>
			<p class="content-detail">
			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<div class="row">
			  <ul class="listing-item">
				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2007 - 2009
						</h2>
						<p class="job">
						  web designer
						</p>
						<p class="company">
						  Corp Project
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>

				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2009 - 2010
						</h2>
						<p class="job">
						  web designer
						</p>
						<p class="company">
						  Google inc
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>
			  </ul>  
			  <ul class="listing-item">
				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2010 - 2014
						</h2>
						<p class="job">
						  crative director 
						</p>
						<p class="company">
						  41 studio
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>

				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2014 - NOW
						</h2>
						<p class="job">
						  fullstack designer
						</p>
						<p class="company">
						  Freelance
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>
			  </ul>

			</div>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.EMPLOYEMENT END-->

	<!--SKILLS-->
	<section class="white-bg" id="skill">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Skills</span>
			</h3>
			<p class="content-detail">
			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<!--SKILLST-->
			<div class="skillst">
			  <div class="skillbar" data-percent="78%">
				<div class="title head-sm">
				  HTML 5
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			  <div class="skillbar" data-percent="91%">
				<div class="title head-sm">
				  CSS 4
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			  <div class="skillbar" data-percent="58%">
				<div class="title head-sm">
				  jQuery
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			  <div class="skillbar" data-percent="63%">
				<div class="title head-sm">
				  PHP
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			  <div class="skillbar" data-percent="95%">
				<div class="title head-sm">
				  Photoshop
				</div>
				<div class="count-bar">
				  <div class="count"></div>
				</div>
			  </div>
			</div>
			<!--/.SKILLST END-->
		  </div>
		</div>
	  </div>
	</section>
	<!--/.SKILLS END-->

	<!--EDUCATION-->
	<section class="grey-bg" id="education">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Education</span>
			</h3>
			<p class="content-detail">
			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>
		  </div>
		  <div class="col-md-9 content-right">
			<div class="row">
			  <ul class="listing-item">
				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2002 - 2005
						</h2>
						<p class="job">
						  Information System
						</p>
						<p class="company">
						  Telkom University
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>

				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2005 - 2007
						</h2>
						<p class="job">
						  DKV
						</p>
						<p class="company">
						  UNIKOM
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>
			  </ul>
			  <ul class="listing-item">
				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2007 - 2009
						</h2>
						<p class="job">
						  Magister DKV 
						</p>
						<p class="company">
						  ITB
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>

				<li>
				  <div class="col-md-6 col-sm-6">
					<div class="wrap-card">
					  <div class="card">
						<h2 class="year">
						  2009 - 2010
						</h2>
						<p class="job">
						  Typhography Magister
						</p>
						<p class="company">
						  Florida University
						</p>
						<hr>
						<div class="text-detail">
						  <p>
							Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanita per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes.
						  </p>
						</div>
					  </div>
					</div>
				  </div>
				</li>
			  </ul>

			</div>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.EDUCATION END-->

	<!--TESTIMONIAL-->
	<section id="testimonial">
	  <div class="container">
		<div class="row wrap-testimonial">
		  <div class="col-md-10 col-md-offset-1">
			<div class="owl-carousel">
			  <div class="list-testimonial">
				<div class="content-testimonial">
				  <h3 class="testi">
					“ Reza did a phenominal job setting up my a website for my product He performed the task very quickly and efficiently. We know we have the superior topical pain relief cream on the market and he has helped us communicate that message via the website he built from scratch. Thanks! ”
				  </h3>
				  <p class="people">
					Darin Cohen - Active10
				  </p>
				</div>
			  </div>
			  <div class="list-testimonial">
				<div class="content-testimonial">
				  <h3 class="testi">
					“ Another successful project working with Reza. He has great design skills, is very responsive and professional. Looking forward to the next opportunity to work together. ”
				  </h3>
				  <p class="people">
					Marko Milicevic
				  </p>
				</div>
			  </div>
			  <div class="list-testimonial">
				<div class="content-testimonial">
				  <h3 class="testi">
					“ Great designer! I like his sense of design, especially the color scheme. Quick turnaround. Look forward to work with him again. Thanks!! ”
				  </h3>
				  <p class="people">
					JK Thang
				  </p>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	  <div class="mask-testimonial"></div>
	</section>
	<!--/.TESTMONIAL END-->

	<!--BLOG-->
	<section class="grey-bg" id="blog">
	  <div class="container">
		<div class="row">
		  <div class="col-md-12">
			<h3 class="title-small-center text-center">
			  <span>Blog</span>
			</h3>
			<div class="row">
			  <div class="col-md-6 col-md-offset-3">
				<p class="content-details text-center">
				  Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. 
				</p>
			  </div>
			</div>
			<!--GRID BLOG-->
			<div class="grid">
			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog-1" class="img-circle text-center" src="images/blog-1.png">
				  <p class="subtitle fancy">
					<span>09/01/2017</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  Popular Design in 2017 
					</h3>
				  </a>
				  <p class="content-blog">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
				  </p>
				</div>
			  </div>

			  <div class="grid-item">
				<div class="wrap-article">
				 <img alt="blog-4" class="img-circle text-center" src="images/blog-4.jpg">
				 <p class="subtitle fancy">
					<span>08/20/2017</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  Just Start
					</h3>
				  </a>
				  <p class="content-blog">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
				  </p>
				</div>
			  </div>

			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog6" class="img-circle text-center" src="images/blog-6.jpg">
				  <p class="subtitle fancy">
					<span>08/11/2017</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  The Huffington Post
					</h3>
				  </a>
				  <p class="content-blog">
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
				  </p>
				</div>
			  </div>
			  
			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog2" class="img-circle text-center" src="images/blog-2.jpg">
				  <p class="subtitle fancy">
					<span>08/03/2017</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  Manuk!
					</h3>
				  </a>
				  <p class="content-blog">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
				  </p>
				</div>
			  </div>

			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog5" class="img-circle text-center" src="images/blog-5.jpg">
				  <p class="subtitle fancy">
					<span>07/26/2017</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  Do Web Designer Really Need To Know UI/UX Design and Backend Code too?
					</h3>
				  </a>
				  <p class="content-blog">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
				  </p>
				</div>
			  </div>

			  <div class="grid-item">
				<div class="wrap-article">
				  <img alt="blog-3" class="img-circle text-center" src="images/blog-3.jpg">
				  <p class="subtitle fancy">
					<span>08/03/2017</span>
				  </p>
				  <a href="#">
					<h3 class="title">
					  Somewhere Place
					</h3>
				  </a>
				  <p class="content-blog">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.
				  </p>
				</div>
			  </div>                  

			</div>
			<!--/.GRID BLOG END-->
		  </div>
		</div>
	  </div>
	</section>
	<!--/.BLOG END-->

	<!--CONTACT-->
	<section id="contact" class="white-bg">
	  <div class="container">
		<div class="row">
		  <div class="col-md-3">
			<h3 class="title-small">
			  <span>Contact</span>
			</h3>
			<p class="content-detail">
			  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>

		  </div>
		  <div class="col-md-9 content-right">
			<form>
			  <div class="group">
				<input required="" type="text"><span class="highlight"></span><span class="bar"></span><label>Name</label>
			  </div>
			  <div class="group">
				<input required="" type="email"><span class="highlight"></span><span class="bar"></span><label>Email</label>
			  </div>
			  <div class="group">
				<textarea required=""></textarea><span class="highlight"></span><span class="bar"></span><label>Message</label>
			  </div>
			  <input id="sendMessage" name="sendMessage" type="submit" value="Send Message">
			</form>
		  </div>
		</div>
	  </div>
	</section>
	<!--/.CONTACT END-->
	
	<!--FOOTER-->
	<footer>
	  <div class="footer-top">
		<ul class="socials">
		  <li class="facebook">
			<a href="#" data-hover="Facebook">Facebook</a>
		  </li>
		  <li class="twitter">
			<a href="#" data-hover="Twitter">Twitter</a>
		  </li>
		  <li class="gplus">
			<a href="#" data-hover="Google +">Google +</a>
		  </li>
		</ul>
	  </div>

	  <div class="footer-bottom">
		<div class="container">
		  <div class="row">
			<img src="images/logo-bottom.png" alt="logo bottom" class="center-block" />Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://www.mycodes.net/">网站模板</a>
		  </div>
		</div>
	  </div>
	</footer>
	<!--/.FOOTER-END-->

  <!--/.CONTENT END-->
  </div>
<!--/.CONTENT-WRAP END-->
</div>


<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.appear.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/classie.js" type="text/javascript"></script>
<script src="js/owl.carousel.min.js" type="text/javascript"></script>
<script src="js/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/masonry.js" type="text/javascript"></script>
<script src="js/smooth-scroll.min.js" type="text/javascript"></script>
<script src="js/typed.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>